<template>
    <el-container class="baseInfo">
        <el-header>
            基本信息认证
        </el-header>
        <el-main>
            <el-form ref="form" :model="form" label-width="100px" status-icon :rules="rules">
                    <h4>公司信息</h4>
                    <el-form-item label="公司全称">
                        <el-input type="tel" v-model.number="form.company_name"></el-input>
                    </el-form-item>
                    <el-form-item label="产品品牌">
                        <el-input v-model="form.company_brand"></el-input>
                    </el-form-item>
                    <el-form-item label="公司所在地">
                        <el-cascader
                            expand-trigger="hover"
                            :options="cityData3Arr"
                            v-model="company_address"
                            @change="changeData3">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="form.c_street"></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话">
                        <el-input v-model="form.company_tel"></el-input>
                    </el-form-item>
                    <el-form-item label="机构类型">
                        <el-select v-model="form.mechanism_type" placeholder="请选择">
                            <el-option
                            v-for="item in mechanismArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务涉及区域">
                         <el-cascader
                            expand-trigger="hover"
                            :options="cityData2Arr"
                            v-model="business_area"
                            @change="changeData2">
                        </el-cascader>
                    </el-form-item>
                    <h4>公司资质</h4>
                    <p>营业执照</p>
                    <el-upload
                        :auto-upload="false"
                        :action="imgUploadUrl"
                        :show-file-list = "false"
                        list-type="picture-card"
                        :on-change='business_license_change'
                    >
                        <img :src="localImg.business_licenseImg" width="120px" height="120px" v-if="localImg.business_licenseImg">                    
                        <i class="el-icon-plus" v-else></i>
                    </el-upload>
                    <p v-if="flag.business_license1">上传中</p>
                    <p v-if="flag.business_license2">成功</p>
                    <p>法人身份证</p>
                    <el-row type='flex'>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='lp_idcard_frontend_change'
                            >
                                <img :src="localImg.lp_idcard_frontendImg" width="120px" height="120px" v-if="localImg.lp_idcard_frontendImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.lp_idcard_frontend1">上传中</p>
                            <p v-if="flag.lp_idcard_frontend2">成功</p>
                        </el-col>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='lp_idcard_backend_change'
                            >
                                <img :src="localImg.lp_idcard_backendImg" width="120px" height="120px" v-if="localImg.lp_idcard_backendImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.lp_idcard_backend1">上传中</p>
                            <p v-if="flag.lp_idcard_backend2">成功</p>
                        </el-col>
                    </el-row>
                    <p>公司相关资质</p>
                    <el-upload
                        ref="liuqing"
                        :action="imgUploadUrl"
                        list-type="picture-card"
                        :file-list="arr"
                        :auto-upload="false"
                        :on-change="related_aptitudes_change"
                        :before-remove="related_aptitudes_remove"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>  
                    <p v-if="flag.related_aptitudes1">上传中</p>
                    <p v-if="flag.related_aptitudes2">成功</p>             
                    <h4 style="margin-top:100px">负责人信息</h4>
                    <el-form-item label="负责人姓名">
                        <el-input v-model="form.pr_name"></el-input>
                    </el-form-item>
                    <el-form-item label="职务">
                        <el-input v-model="form.pr_job"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="form.pr_phone"></el-input>
                    </el-form-item>
                    <p>负责人身份证</p>
                    <el-row type='flex'>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='pr_idcard_frontend_change'
                            >
                                <img :src="localImg.pr_idcard_frontendImg" width="120px" height="120px" v-if="localImg.pr_idcard_frontendImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.pr_idcard_frontend1">上传中</p>
                            <p v-if="flag.pr_idcard_frontend2">成功</p>
                        </el-col>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='pr_idcard_backend_change'
                            >
                                <img :src="localImg.pr_idcard_backendImg" width="120px" height="120px" v-if="localImg.pr_idcard_backendImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.pr_idcard_backend1">上传中</p>
                            <p v-if="flag.pr_idcard_backend2">成功</p>
                        </el-col>
                    </el-row>
                    <p>手持身份证照片</p>
                    <el-row type='flex'>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='pr_idcard_hold_change'
                            >
                                <img :src="localImg.pr_idcard_holdImg" width="120px" height="120px" v-if="localImg.pr_idcard_holdImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.pr_idcard_hold1">上传中</p>
                            <p v-if="flag.pr_idcard_hold2">成功</p>
                        </el-col>
                    </el-row>
                    <p>工作名片或工牌照片</p>
                    <el-row type='flex'>
                        <el-col :span="4">
                            <el-upload
                                :auto-upload="false"
                                :show-file-list="false"
                                :action="imgUploadUrl"
                                list-type="picture-card"
                                :on-change='work_card_change'
                            >
                                <img :src="localImg.work_cardImg" width="120px" height="120px" v-if="localImg.work_cardImg">
                                <i class="el-icon-plus" v-else></i>
                            </el-upload>
                            <p v-if="flag.work_card1">上传中</p>
                            <p v-if="flag.work_card2">成功</p>
                        </el-col>
                    </el-row>
                    <el-button type="primary" @click="onSubmit('form')">提交申请</el-button>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import * as types from '@/assets/js/address';
import {info} from '@/api/login';
import { commonUrl } from '@/config/index'
import { removeImg } from '@/api/upload'
import axios from 'axios'
import {convertImgToBase64} from '@/common/uploadImg'

export default {
    data() {
        let validatorTel = (rule,value,callback) => {
            callback()
        }
        return {   
            imgUploadUrl: commonUrl.uploadImg,
            // 上传时候的状态
            flag: {
                business_license1: false,
                business_license2: false,
                lp_idcard_frontend1: false,
                lp_idcard_frontend2: false,
                lp_idcard_backend1: false,
                lp_idcard_backend2: false,
                related_aptitudes1: false,
                related_aptitudes2: false,
                pr_idcard_frontend1: false,
                pr_idcard_frontend2: false,
                pr_idcard_backend1: false,
                pr_idcard_backend2: false,
                pr_idcard_hold1: false,
                pr_idcard_hold2: false,
                work_card1: false,
                work_card2: false
            },
            localImg: {
               business_licenseImg: '',
               lp_idcard_frontendImg: '',
               lp_idcard_backendImg: '',
               pr_idcard_frontendImg: '',
               pr_idcard_backendImg: '',
               pr_idcard_holdImg: '',
               work_cardImg: ''
            },
            arr: [],               
            fileArr: [],
            form: {
                // 公司信息
                company_name: '', // 公司全称
                company_brand: '', // 产品品牌
                c_pid: '', // 公司所在地 省
                c_cid: '', // 市
                c_aid: '', // 区
                c_street: '', // 详细地址
                company_tel: '', // 公司电话
                mechanism_type: '', // 机构类型
                b_pid: '', // 业务涉及区域 省
                b_cid: '', // 市
                // 负责人信息
                pr_name: '', // 负责人姓名
                pr_job: '', // 职务
                pr_phone: '', // 联系电话
            },
            rules:{
                tel:[
                    {validator: validatorTel, trigger: 'blur'}
                ]
            },
            company_address:[],
            business_area:[],
            dialogVisible: false,
            cityData3Arr: types.cityData3,
            mechanismArr: types.org,
            cityData2Arr: types.cityData2,

            // 图片上传地址
            
            // imageUrl: 
        }
    },
    created() {
        setTimeout(() => {
            info().then((res) => {
                console.log(res)
                if(res.code === -2) {
                    this.$router.push('/login')
                }
                this.show = true
                this.form = {
                    // 公司信息
                    company_name: '', // 公司全称
                    company_brand: '', // 产品品牌
                    c_pid: '', // 公司所在地 省
                    c_cid: '', // 市
                    c_aid: '', // 区
                    c_street: '', // 详细地址
                    company_tel: '', // 公司电话
                    mechanism_type: '', // 机构类型
                    b_pid: '', // 业务涉及区域 省
                    b_cid: '', // 市
                    // 负责人信息
                    pr_name: '', // 负责人姓名
                    pr_job: '', // 职务
                    pr_phone: '', // 联系电话
                }

                this.localImg.business_licenseImg = res.data.business_license
                this.localImg.lp_idcard_frontendImg = res.data.lp_idcard_frontend
                this.localImg.lp_idcard_backendImg = res.data.lp_idcard_backend
                this.localImg.pr_idcard_frontendImg = res.data.pr_idcard_frontend
                this.localImg.pr_idcard_backendImg = res.data.pr_idcard_backend
                this.localImg.pr_idcard_holdImg = res.data.pr_idcard_hold
                this.localImg.work_cardImg = res.data.work_card

                this.fileArr = res.data.related_aptitudes
                this.fileArr.forEach(el => {
                    this.arr.push({url:el})
                });
                this.company_address = [this.form.c_pid,this.form.c_cid,this.form.c_aid]
                this.business_area = [this.form.b_pid,this.form.b_cid]
            })
        },20)
    },
    methods: {
        changeData3(value) {
            console.log(value)
        },
        changeData2(value) {
            console.log(value)
        },
        pubConvertImgToBase64(_this,file,name) {
            let newName1 = `${name}1` // 上传中状态
            let newName2 = `${name}2` // 上传成功状态
            let newName3 = `${name}Img` // 本地图片显示
            _this.localImg[newName3] = file.url
            _this.flag[newName1] = true
            convertImgToBase64(file.url,name,function(data) {
                _this.flag[newName1] = false
                _this.flag[newName2] = data.flag               
            })
        },
        business_license_change(file) { // 营业执照
            this.pubConvertImgToBase64(this,file,'business_license')
        },
        lp_idcard_frontend_change(file) { // 法人身份证(头像面)
            this.pubConvertImgToBase64(this,file,'lp_idcard_frontend')
        },
        lp_idcard_backend_change(file) { // 法人身份证(国徽面)
            this.pubConvertImgToBase64(this,file,'lp_idcard_backend')
        },
        related_aptitudes_change(file,filelist) { // 相关资质添加
            // related_aptitudes
            let _this = this
            _this.flag.related_aptitudes1 = true
            _this.flag.related_aptitudes2 = false
            convertImgToBase64(file.url,'related_aptitudes',function(data) {
                _this.flag.related_aptitudes1 = false
                _this.flag.related_aptitudes2 = data.flag   
            })
        },
        related_aptitudes_remove(file,fileList) { // 相关资质添加
            removeImg('related_aptitudes',file.url)
        },
        pr_idcard_frontend_change(file) { // 负责人身份证(国徽面)
            this.pubConvertImgToBase64(this,file,'pr_idcard_frontend')
        },
        pr_idcard_backend_change(file) { // 负责人身份证(国徽面)
            this.pubConvertImgToBase64(this,file,'pr_idcard_backend')
        },
        pr_idcard_hold_change(file) { // 负责人身份证(手持)
            this.pubConvertImgToBase64(this,file,'pr_idcard_hold')
        },
        work_card_change(file) { // 工作名片或工牌照片
            this.pubConvertImgToBase64(this,file,'work_card')
        }
    }
}
</script>



<style lang="scss" scoped>
.el-container {
    .el-header {
        height: 100px !important;
        line-height: 100px;
        font-size: 20px;
    }
    .el-main {
        .el-form {
            width: 800px;
            margin: 0 auto;
            >h4 {
                font-size: 18px;
                padding: 10px 0 0 0;
            }
            >p {
                font-size: 15px;
                padding: 8px 0;
            }
            .faren {
                display: flex;
            }
        }
    }
}
</style>

